<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>条件渲染</title>
  <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
       <!-- (1)条件渲染：v-show控制display是否是None
            (2)         v-if 该标签是否存在，比v-show更彻底，为false时直接没有标签
                        而v-show只是隐藏, 同样还有 v-else-if、v-else
                        注意 v-if、v-else-if、v-else不能打断
            (3)两者使用场景：切换频率高的使用v-show，否则就用v-if
      -->
      <h2 v-show="a">欢迎，{{n}}</h2>
      <button @click="n++">点我n+1</button>
      <h2 v-if="n === 1">Angular</h2>
      <h2 v-else-if="n === 2">React</h2>
      <h2 v-else-if="n === 3">Vue</h2>
     
      <!-- (4)template模板可以包裹多个标签，但是编译后会直接去掉，不会影响原来的结构
           (5)template只能配合v-if使用，不能用，这样是为了效率，如果不需要显示直接全部不生成
      -->
      <template v-if="n === 3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </template>

   </div>
    <script type='text/javascript'>
        new Vue({
            el:'#root',
            data:{
              name:'aaa',
              n:0,
              a:true
            }
        })
    </script>
</body>
</html>